<template>
	<view>
		<TopNav title="塘口列表"></TopNav>
		<view class="cu-card case">
			<view class="cu-item shadow padding" v-for="item in list" :key="item.culturePondId"
				@click=handleSelection(item) :class="{'selection':checkSelection(item)}">
				<view class="flex align-center">
					<view class="shrink-0 padding-right">
						<text class="text-xxl text-bold"
							:class="{'text-blue':checkSelection(item)}">{{item.culturePondName}}</text>
					</view>
					<view class="flex-1">
						<view class="flex justify-between padding-bottom-xs">
							<view class="">
								<text class="text-gray">类型：</text>
								<text>{{item.typeName}}</text>
							</view>
							<view class="">
								<text class="text-gray">面积：</text>
								<text>{{item.area || '-'}}亩</text>
							</view>
						</view>
						<view class="">
							<text class="text-gray">所属基地：</text>
							<text>{{item.productionBaseName}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="bottom-tools padding flex justify-around bg-white">
			<van-button class='basis-sm' plain hairline type="info" @click="handleReset">重 置</van-button>
			<van-button class='basis-sm' type="primary" @click="handleConfirm">
				确 定
			</van-button>
		</view>
	</view>
</template>

<script>
	import {
		listSelect
	} from '@/api/mine/pond'
	export default {
		data() {
			return {
				queryParams: {
					productionBaseId: undefined
				},
				selectionList: [],
				list: [],
				multiple: false
			}
		},
		onLoad(query) {
			(async () => {
				await this.getList()
				if (query.pondId) {
					let pondList = query.pondId.split(",")
					for (let id of pondList) {
						let findResult = this.list.find(item => item.culturePondId === id)
						this.handleSelection(findResult)
					}
				}
			})()

		},
		methods: {
			checkSelection(val) {
				if (this.selectionList.length === 0) return false
				return this.selectionList.find(item => item.culturePondId === val.culturePondId)
			},
			handleSelection(val) {
				if(!val) return
				let findIndexResult = this.selectionList.findIndex(item => item.culturePondId === val.culturePondId)
				if (findIndexResult >= 0) {
					this.selectionList.splice(findIndexResult, 1)
					return
				}
				if (this.multiple) {
					this.selectionList.push(val)
				} else {
					this.selectionList = [val]
				}
			},
			async getList() {
				await listSelect(this.queryParams).then(res => {
					this.list = res.data
				})
			},
			handleReset() {
				this.selectionList = []
			},
			handleConfirm() {
				uni.$emit('pondSelect', this.selectionList)
				this.$tab.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	@import "@/common/var.scss";
	page {
		@include fixed-bottom;
	}
	
</style>
<style scoped lang="scss">

	.selection {
		border: 1px solid #0081ff;
	}
</style>